<body style="min-width:500px;">
    <? $this->load->helper('url'); ?>
    <script src="<?php echo base_url('assets/js/chart.js'); ?>"></script>
    <div id="wrap">
        <div class="container">
            <div class="navbar-default navbar-fixed-top">
                <div class="container">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-header">
                        <strong><a href="<? echo base_url(); ?>" class="navbar-brand"> <span class="glyphicon glyphicon-book"></span>  READING LABORATORY</a></strong>
                    </div>
                    <div class="collapse navbar-collapse">
                        <div style="float:right;"><p class="navbar-text">Signed in as <a onClick="$('#tab1').removeClass('active');$('#tab2').removeClass('active');var element = document.getElementById('tab3');element.classList.add('active');" href="#profile" data-toggle="tab" style="color: white"><strong><? echo $profile['firstname'] . ' ' . $profile['lastname'] ?></strong></a> &nbsp; <a href="<? echo base_url('logout') ?>" class="btn btn-xs btn-danger">Logout</a></p></div>
                    </div>
                </div>
            </div>

            <div  style="padding:70px 0px 0px 0px;">
                <div class='col-md-3'>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <ul class="nav nav-pills nav-stacked" id="myTab">
                                <li class="<? if (!isset($activeMenu))echo 'active'?> text-center" id='tab1'><a href="#statistics" data-toggle="tab">Dashboard</a></li>
                                <li class="<? if (isset($activeMenu)) if ($activeMenu == 'myProfile'){echo 'active';} ?> text-center" id='tab2'><a href="#profile" data-toggle="tab">My Profile</a></li>
                                <li class="text-center" id='tab3'><a href="#exam" data-toggle="tab">Take Assessment</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class='col-md-9'>
                    <div id="menuContent" class="tab-content">
                        <div class="tab-pane fade <? if (!isset($activeMenu))echo 'active'?> in" id="statistics">
                            <div class="panel panel-primary">
                                <div class="panel-heading">Dashboard > <span id="tabName">My Statistics </span></div>
                                <div class="panel-body">

                                    <ul class="nav nav-tabs" id="myTablia">
                                        <li class="active text-center"><a href="#statisticsTab" data-toggle="tab" onclick='$("#tabName").text("My Statistics");'>My Statistics</a></li>
                                        <li class="text-center"><a href="#scoreTab" data-toggle="tab" onclick='$("#tabName").text("My Scores");'>My Scores</a></li>
                                    </ul>

                                    <div id="itemContent" class="tab-content">
                                        <div class="tab-pane fade active in" id="statisticsTab"  style="padding-top:2%">

                                            <div class="col-md-3"><label>My Current Color:</label></div>
                                            <div class="col-md-3" style="background-color:<? echo $color['colorhex'] ?>;">&nbsp;</div>

                                            <div class="col-md-12" style="padding-top:1%;"><label>My Goals:</label></div>
                                            <?$counter=1; foreach($criterias as $criteria ){?>
                                            <?if ($counter<4){
                                                if($counter==1){?>
                                            <div class='row'>
                                                <?}?>
                                                <div class="col-md-4" >
                                                
                                                <label class="checkbox-inline" onclick="click(function() {
                                    return false;
                                });">
                                                    <input type="checkbox"  <? if (($criteria['state'] == 'A' && $criteria['doesExist'] == 'Y') || $criteria['doesExist'] == 'N') echo 'checked' ?>/><span class="check"><?echo $criteria['criteria_name']?></span>
                                                </label>
                                            </div>
                                                <?if($counter==3){?>
                                            </div>
                                                <?}?>
                                            <?}else if ($counter<7){
                                                if($counter==4){?>
                                            <div class='row'>
                                                <?}?>
                                                <div class="col-md-4" >
                                                
                                                <label class="checkbox-inline" onclick="click(function() {
                                    return false;
                                });">
                                                    <input type="checkbox"  <? if (($criteria['state'] == 'A' && $criteria['doesExist'] == 'Y') || $criteria['doesExist'] == 'N') echo 'checked' ?>/><span class="check"><?echo $criteria['criteria_name']?></span>
                                                </label>
                                            </div>
                                                <?if($counter==6){?>
                                            </div>
                                                <?}?>
                                            <?}else if ($counter<10){
                                                if($counter==7){?>
                                            <div class='row'>
                                                <?}?>
                                                <div class="col-md-4" >
                                                
                                                <label class="checkbox-inline" onclick="click(function() {
                                    return false;
                                });">
                                                    <input type="checkbox"  <? if (($criteria['state'] == 'A' && $criteria['doesExist'] == 'Y') || $criteria['doesExist'] == 'N') echo 'checked' ?>/><span class="check"><?echo $criteria['criteria_name']?></span>
                                                </label>
                                            </div>
                                                <?if($counter==9){?>
                                            </div>
                                                <?}?>
                                            <?}?>
                                            <?$counter+=1;}?>

                                            <div class="col-md-4" style="padding-top:1%;"><label>Score Summary for this level:</label>
                                            </div>

                                            <div class="col-md-12" >
                                                <? if (!empty($chart)) {
                                                    $reverse_chart = array_reverse($chart);
                                                    if (count($reverse_chart) == 1) {
                                                        foreach ($reverse_chart as $score) {
                                                            $labels = '["' . $score['title'] . '","",""]';
                                                            $dataset ='[' . $score['score'] . ',0,0]';
                                                        }
                                                    } else {
                                                        $labels = '[';
                                                        $dataset = '[';
                                                        $lastElement = end($reverse_chart);
                                                        foreach ($reverse_chart as $score => $value) {
                                                            if ($lastElement == $value) {
                                                                $labels .= '"' . $value['title'] . '';
                                                                $dataset .= '' . $value['score'] . '';
                                                            } else {
                                                                $labels .= '"' . $value['title'] . '",';
                                                                $dataset .= '' . $value['score'] . ',';
                                                            }
                                                        }$labels .= '"]';
                                                        $dataset .= ']';
                                                    }
                                                    ?>
                                                    <canvas id="canvas" height="300" width="800"></canvas>
                                                    <script>

                                                                        var barChartData = {
                                                                            labels: <? echo $labels; ?>,
                                                                            datasets: [
                                                                                {
                                                                                    fillColor: "rgba(19,152,126,.5)",
                                                                                    strokeColor: "rgba(220,220,220,1)",
                                                                                    data: <? echo $dataset; ?>,
                                                                                }
                                                                            ]

                                                                        }
                                                                        
                                                                        

                                                                        var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

                                                    </script><? }
else echo '<h3 class="text-center text-danger">NO SCORES TO DISPLAY YET.</h3>' ?>
                                            </div> 
                                        </div>

                                        <div class="tab-pane fade in" id="scoreTab" style="padding-top:2%;">
<? if (!empty($scores)) { ?>
                                                <div class="col-md-12">
                                                    <div class="form-inline pull-right" style="margin-bottom:2%">
                                                        <div class="form-group">
                                                            <input type="search" class="form-control input-sm light-table-filter" data-table="stdntReport" placeholder="Search..">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="table-responsive">
                                                    <table id="StudentReport" class="stdntReport table table-hover tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                        <thead>
                                                            <tr>
                                                                <th class="text-center" width=15%>Color</th>
                                                                <th class="text-center" width=30%>Story Title</th>
                                                                <th class="text-center" width=15%>Date Taken</th>
                                                                <th class="text-center" width=15%>Duration</th>
                                                                <th class="text-center" width=15%>Score</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
    <? foreach ($scores as $score) { ?>
                                                                <tr>
                                                                    <td style="background-color:<? echo $score['colorhex'] ?>"></td>
                                                                    <td class="text-center"><? echo $score['title'] ?></td>
                                                                    <td class="text-center"><? echo $score['date'] ?></td>
                                                                    <td class="text-center"><? echo $score['duration'] ?></td>
                                                                    <td class="text-center"><? echo $score['score'] ?></td>
                                                                </tr>
    <? } ?>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div id="StudentReportPager" class="pager">
                                                    <form class="form-inline">
                                                        <div class="form-group">
                                                            <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                            <span class="glyphicon glyphicon-backward  prev">  </span>
                                                        </div>
                                                        <div class="form-group">
                                                            <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="glyphicon glyphicon-forward  next">  </span>
                                                            <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                        </div>
                                                        <div class="form-group">
                                                            <select class="pagesize form-control input-sm "  >
                                                                <option selected="selected"  value="10">10</option>
                                                                <option value="20">20</option>
                                                                <option value="30">30</option>
                                                                <option  value="40">40</option>
                                                            </select></div>
                                                    </form>
                                                </div>
<? }
else echo '<h3 class="text-center text-danger">NO SCORES TO DISPLAY YET.</h3>' ?>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane <? if (isset($activeMenu)) if ($activeMenu == 'myProfile') echo 'active' ?> fade in" id="profile">
                            <div class="panel panel-primary">
                                <div class="panel-heading">My Profile</div>
                                <div class="panel-body">
<? if (isset($activeMenu)) if ($activeMenu == 'myProfile') { if (isset($error)) {?>
                                                                        <div class="col-md-12">
                                            <div class="alert alert-danger alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <? echo $error; ?>
                                            </div>    
                                        </div>
<?}else{ if(isset($alert)){?>
                                        <div class="col-md-12">
                                            <div class="alert alert-success alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <? echo $alert; ?>
                                            </div>    
                                        </div>
<? }} }?>
                                    <div class='col-md-4'>
                                    <img src="<? echo base_url('/assets/images/student.png')?>" alt="Smiley face" height="100%" width="100%">
                                    </div>
                                    <div class='col-md-8'>
                                        <div class='row'>
                                            <div class='col-md-12'>
                                                <label>Username:</label> <?echo $profile['username']?>
                                            </div>
                                            <div class='col-md-12'>
                                                <label>First Name:</label> <?echo $profile['firstname']?>
                                            </div>
                                            <div class='col-md-12'>
                                                <label>Middle Name:</label> <?echo $profile['middlename']?>
                                            </div>
                                            <div class='col-md-12'>
                                                <label>Last Name:</label> <?echo $profile['lastname']?>
                                            </div>
                                            <div class='col-md-12'>
                                                <label>Section:</label> <?echo $profile['section']?>
                                            </div>
                                            <div class='col-md-12'>
                                                <label>Level:</label> <?echo $profile['level_number']?>
                                            </div>
                                            <div class='col-md-12  text-center'>
                                                 <a href="<? echo base_url('student/edit/') ?>" class="btn btn-warning">Edit</a>
                                                 <a data-target='#changePass' data-toggle="modal" href="#" class="btn btn-primary" style="">Change Password</a>
                                            </div>
                                        </div>
                                    </div>
                                 </div>
                            </div>
                        </div>
                        <div class="tab-pane fade in" id="exam">
                            <div class="panel panel-primary">
                                <div class="panel-heading">Take Assessment</div>
                                <div class="panel-body" style="padding-top: 10%;padding-bottom: 10%;">
                                    <div class='col-md-3 col-md-offset-5'>
                                        <a href="<? echo base_url('student/readStory/') ?>" class="btn btn-success btn-lg btn-block" style="">START</a>
                                    </div>
                                </div>	

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="container" >
            <p class="text-center" style="color:white;margin:19px;">My Reading Laboratory. Copyright <?echo date("Y");?> © </p>
        </div>
    </div>
    
    <div class="modal fade" id="changePass" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top: 5%">
    <div class="modal-dialog" style="margin-left: 35%;">
        <div class="modal-content" style="width:80%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Change Password</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12" id="passwordError" style="display:none">
                    <div class="alert alert-danger">
                        <button type="button" class="close" onclick="document.getElementById('passwordError').style.display = 'none';" aria-hidden="true">&times;</button>
                        New password is not the same with the confirmation password.
                    </div>    
                </div>
                <form class="form-horizontal" id="changePassForm" method="post" action="<?php echo base_url('student/changePassword/' . $profile['user_id']); ?>">
                    <div class="form-group">
                        <label class="col-sm-5 control-label">Current Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="currentPass" name="currentPass" class="form-control input-sm" placeholder="Current Password" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-5 control-label">New Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="newPass" name="newPass" class="form-control input-sm" placeholder="New Password" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-5 control-label">Confirm Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="confirmPass" name="confirmPass" class="form-control input-sm" placeholder="Confirm Password" />
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button   onClick="changePass()" class="btn btn-primary btn-sm">Change Password</button>
                        <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">CANCEL</button>
                    </div> 
                </form>
            </div>
        </div>
    </div>
</div>
    
<script>
                                    function changePass() {
                                        var newPassText = document.getElementById('newPass').value;
                                        var confirmPassText = document.getElementById('confirmPass').value;

                                        if ( newPassText != confirmPassText || newPassText == '' || confirmPassText == '') {
                                            document.getElementById('passwordError').style.display = '';
                                            event.preventDefault();
                                        }
                                    }

                                    </script>
